import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { getMenuList } from '@/api/system/system';

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'title',
    width: 200,
    align: 'left',
  },
  {
    title: '路由别名',
    dataIndex: 'name',
  },
  {
    title: '菜单级别',
    dataIndex: 'level',
  },
  {
    title: '路由地址',
    dataIndex: 'url',
  },
  {
    title: '组件地址',
    dataIndex: 'component',
  },
  {
    title: '排序',
    dataIndex: 'order',
  },
  {
    title: '是否显示菜单',
    dataIndex: 'is_show',
    customRender: ({ record }) => {
      const status = record.is_show;
      const enable = ~~status === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '启用' : '停用';
      return h(Tag, { color: color }, () => text);
    },
  },
];
const isButton = (type: string) => type === '2';

export const searchFormSchema: FormSchema[] = [
  // {
  //   field: 'title',
  //   label: '菜单名称',
  //   component: 'Input',
  // },
  {
    field: 'status',
    label: '状态',
    labelWidth: 40,
    component: 'Select',
    componentProps: {
      style: {
        width: '100px',
        marginRight: '20px',
      },
      options: [
        { label: '启用', value: 2 },
        { label: '停用', value: 1 },
      ],
    },
    defaultValue: 2,
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'title',
    label: '菜单名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'name',
    label: '路由别名',
    component: 'Input',
    required: true,
  },
  // {
  //   field: 'parent_id',
  //   label: '上级菜单',
  //   // component: 'TreeSelect',
  //   component: 'Select',
  //   componentProps: {
  //     fieldNames: {
  //       label: 'title',
  //       key: 'id',
  //       value: 'id',
  //     },
  //     getPopupContainer: () => document.body,
  //   },
  // },
  {
    field: 'parent_id',
    label: '上级菜单',
    // component: 'TreeSelect',
    component: 'ApiSelect',
    componentProps: ({ formModel }) => {
      return {
        api: getMenuList,
        labelField: 'title',
        valueField: 'id',
        resultField: 'list',
        // fieldNames: {
        //   label: 'title',
        //   key: 'id',
        //   value: 'id',
        // },
        getPopupContainer: () => document.body,
        onChange: (value) => {
          console.log('', value);
          formModel.level = value ? 2 : 1;
        },
      };
    },
  },
  {
    field: 'level',
    label: '菜单级别',
    component: 'InputNumber',
    defaultValue: 1,
    dynamicDisabled: true,
    required: true,
  },
  {
    field: 'url',
    label: '路由地址',
    component: 'Input',
    required: true,
  },
  {
    field: 'component',
    label: '组件路径',
    component: 'Input',
  },
  {
    field: 'order',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'icon',
    label: '图标',
    component: 'IconPicker',
  },
  {
    field: 'is_show',
    label: '是否显示',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },
];

const isEdit = (type) => {
  return !!type?.btn_edit;
};

const isTags = (type) => {
  return type?.auth_code == 'tags';
};
const isDiy = (type) => {
  return type?.auth_code == 'other';
};

export const aAuthCode = [
  { value: 'look', label: '查看页面', disabled: false },
  { value: 'add', label: '新增', disabled: false },
  { value: 'edit', label: '编辑', disabled: false },
  { value: 'update', label: '编辑/新增', disabled: false },
  { value: 'status', label: '停用/启用', disabled: false },
  { value: 'del', label: '删除', disabled: false },
  { value: 'upload', label: '导入', disabled: false },
  { value: 'download', label: '导出', disabled: false },
  { value: 'tags', label: '标签页', disabled: false },
  { value: 'other', label: '自定义', disabled: false },
];
const aLevel = [
  { value: '1', label: '1' },
  { value: '2', label: '2' },
  { value: '3', label: '3' },
  { value: '4', label: '4' },
  { value: '5', label: '5' },
  { value: '6', label: '6' },
  { value: '7', label: '7' },
  { value: '8', label: '8' },
  { value: '9', label: '9' },
  { value: '10', label: '10' },
];

export const accessForm = {
  menu_id: '',
  name: '',
  parent_id: '',
  id: '',
  method: '',
  is_show: 1,
  btn_edit: '',
  auth_code: '',
};

export const formAccess: FormSchema[] = [
  {
    field: 'id',
    label: '',
    slot: 'btnAdd',
    component: 'Input',
    show: ({ values }) => !isEdit(values),
  },
  {
    field: 'menu_id',
    label: '菜单ID',
    component: 'Input',
    required: true,
    dynamicDisabled: true,
    ifShow: ({ values }) => isEdit(values),
  },
  {
    field: 'parent_id',
    label: '当前父ID',
    component: 'Input',
    required: true,
    dynamicDisabled: true,
    ifShow: ({ values }) => isEdit(values),
  },
  {
    field: 'name',
    label: '按钮名称',
    component: 'Input',
    required: true,
    colProps: { lg: 24 },
    ifShow: ({ values }) => isEdit(values),
  },
  {
    field: 'auth_code',
    label: '按钮别称',
    component: 'Select',
    componentProps: {
      options: aAuthCode,
    },
    required: true,
    ifShow: ({ values }) => isEdit(values),
  },
  {
    field: 'auth_code_o',
    label: ' ',
    labelWidth: 30,
    component: 'Select',
    required: true,
    componentProps: {
      options: aLevel,
      mode: 'tags',
    },
    colProps: { lg: 8 },
    ifShow: ({ values }) => isEdit(values) && isTags(values),
  },
  {
    field: 'auth_code_e',
    label: ' ',
    labelWidth: 30,
    component: 'Input',
    colProps: { lg: 8 },
    required: true,
    ifShow: ({ values }) => isEdit(values) && isDiy(values),
  },
  {
    field: 'method',
    label: 'method',
    component: 'Input',
    suffix: '当为查看页面时必填，必填1',
    required: false,
    colProps: { lg: 24 },
    ifShow: ({ values }) => isEdit(values),
  },
  {
    field: 'is_show',
    label: '是否显示',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
    colProps: { lg: 24 },
    ifShow: ({ values }) => isEdit(values),
  },
  {
    field: 'btn_edit',
    label: '',
    slot: 'btnEdit',
    component: 'Input',
    colProps: { lg: 5 },
    ifShow: ({ values }) => isEdit(values),
  },
  {
    field: 'btnCancel',
    label: '',
    slot: 'btnCancel',
    component: 'Input',
    ifShow: ({ values }) => isEdit(values),
  },
  {
    label: '',
    field: 'access',
    slot: 'menu',
    colProps: { lg: 24 },
    component: 'Input',
    ifShow: ({ values }) => !isEdit(values),
  },
];
